<template>
    <div class="list-page">
        <!-- 查询信息 -->
        <div class="page-card top-card">
            <div class="page-title">
                <div class="title-content">
                    <span>查询信息</span>
                    <image
                        src="../../static/icons/fresh.png"
                        class="fresh-icon"
                        mode="widthFix"
                        :class="btnLoading ? 'loading' : ''"
                        @click="loadList(false)"
                    />
                </div>
            </div>

            <uni-forms v-model="searchForm" :label-width="80" class="search-form">
                <uni-forms-item label="入库单号" name="receiptOrderNum">
                    <uni-easyinput
                        type="text"
                        v-model="searchForm.receiptOrderNum"
                        placeholder="请输入入库单号"
                        :inputBorder="false"
                    />
                </uni-forms-item>

                <uni-forms-item label="入库日期" name="date">
                    <uni-datetime-picker
                        type="daterange"
                        v-model="searchForm.date"
                        :end="new Date().valueOf()"
                        placeholder="请选择入库日期"
                        :border="false"
                    />
                </uni-forms-item>

                <uni-forms-item label="入库状态" name="receiptStatus">
                    <uni-data-picker
                        v-model="searchForm.receiptStatus"
                        :localdata="statusList"
                        placeholder="请选择入库状态"
                        popup-title="请选择入库状态"
                    ></uni-data-picker>
                </uni-forms-item>

                <uni-forms-item label="抽检状态" name="qmCheckRes">
                    <uni-data-picker
                        v-model="searchForm.qmCheckRes"
                        :localdata="checkList"
                        placeholder="请选择抽检状态"
                        popup-title="请选择抽检状态"
                    ></uni-data-picker>
                </uni-forms-item>
            </uni-forms>
        </div>

        <!-- 入库列表 -->

        <div
            class="page-card my-3"
            v-for="(item, index) in dataList"
            :key="index"
            @click="viewDetail(item.receiptOrderNum)"
        >
            <div class="data-item">
                <div class="item-title">入库单号</div>
                <div class="item-value" :class="item.status === '1' ? 'text-danger' : ''">
                    {{ item.receiptOrderNum }}
                </div>
            </div>

            <div class="data-item">
                <div class="item-title">入库日期</div>
                <div class="item-value">{{ item.receiptTime || '--' }}</div>
            </div>

            <div class="data-item items-center">
                <div class="item-title">入库状态</div>
                <div class="item-value">
                    <div class="flex justify-end items-center">
                        <div class="error-tag" v-if="item.receiptStatus === '4'">已删除</div>
                        <div class="danger-tag" v-else-if="item.receiptStatus === '1'">待入库</div>
                        <div class="success-tag" v-else-if="item.receiptStatus === '2'">已入库</div>
                        <div class="warning-tag" v-else>SAP入库</div>
                    </div>
                </div>
            </div>
        </div>
        <scanUtil />
    </div>
</template>

<script lang="ts" setup>
    import { list } from '@/api/pda'
    import { goTo } from '@/utils/publicFuc'
    import scanUtil from '../component/scanUtil.vue'
    const searchForm = ref<AnyObject>({})

    const statusList: options[] = [
        {
            text: '待入库',
            value: '1',
        },
        {
            text: '已入库',
            value: '2',
        },
        {
            text: 'SAP入库',
            value: '3',
        },
        {
            text: '已删除',
            value: '4',
        },
    ]

    const checkList: options[] = [
        {
            text: '未抽检',
            value: '2',
        },
        {
            text: '抽检通过',
            value: '1',
        },
        {
            text: '抽检未通过',
            value: '0',
        },
    ]
    const btnLoading = ref(false)
    const page = ref(1)
    const status = ref<'more' | 'loading' | 'noMore'>('more')
    const dataList = ref<AnyObject[]>([])

    const loadList = (useLoading?: boolean) => {
        // 点击按钮时,重置列表的状态,按钮旋转
        if (!useLoading) {
            page.value = 1
            status.value = 'more'
            dataList.value = []
            btnLoading.value = true
        }

        // 如果状态不符合不请求数据
        if (status.value !== 'more') return

        const startDate = searchForm.value.date ? searchForm.value.date[0] : undefined
        const endDate = searchForm.value.date ? searchForm.value.date[1] : undefined

        const params = {
            ...searchForm.value,
            startDate,
            endDate,
            pageNumber: page.value,
            pageSize: 10,
        }
        // @ts-ignore
        delete params.date
        status.value = 'loading'

        list(params).then((res: any) => {
            const { data, record } = res
            dataList.value.push(...data)
            if (record === dataList.value.length) {
                // 已经全部获取
                status.value = 'noMore'
            } else {
                status.value = 'more'
                page.value++
            }
            setTimeout(() => {
                btnLoading.value = false
            }, 1000)
        })
    }

    // 页面进入时加载
    loadList(true)

    onReachBottom(() => {
        loadList(true)
    })

    // 扫描相关
    onShow(() => {
        uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
        uni.$on('scancodedate', data => {
            const { code } = data
            viewDetail(code)
        })
    })

    onHide(() => {
        // 离开页面前清除监听器
        uni.$off('scancodedate')
    })
    const viewDetail = (id: string) => {
        // 携带入库单号
        goTo('/pages/detail/index?id=' + id)
    }
</script>

<style lang="scss" scoped>
    @keyframes loading {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .loading {
        animation: loading 1s linear infinite;
    }

    .top-card {
        @apply pb-px;
    }
    .list-page {
        @apply min-h-screen bg-pagebg p-4  box-border;
        .title-content {
            @apply flex justify-between items-center flex-1;
            .fresh-icon {
                @apply w-6;
            }
        }
    }

    .data-item {
        @apply flex justify-between py-2;
        .item-title {
            @apply text-grayText mr-4;
        }
        .item-value {
            @apply flex-1 text-right break-all;
            .danger-tag {
                @apply px-4 py-1 text-danger border border-solid border-danger rounded-full bg-red-100;
            }
            .success-tag {
                @apply px-4 py-1 text-success border border-solid border-success rounded-full bg-green-100;
            }
            .warning-tag {
                background-color: #ffeed7;
                @apply px-4 py-1 text-warning border border-solid border-warning
                    rounded-full;
            }

            .error-tag {
                @apply px-4 py-1 text-white rounded-full bg-danger;
            }
        }
    }

    :deep(.search-form) {
        .uni-forms-item {
            @apply border-b border-line border-solid border-0;

            .uni-easyinput__content-input .uni-input-wrapper {
                @apply text-right;
            }
            .uniui-calendar {
                @apply hidden;
            }
            .uni-input-placeholder {
                @apply text-xs #{!important};
            }
            .input-value-border {
                @apply border-0;
            }
            .selected-list {
                @apply justify-end;
            }
            .uni-data {
                @apply pl-4 box-border;
            }
            .uni-data-pickerview .selected-list {
                @apply justify-start;
            }
            .placeholder {
                @apply justify-end;
            }
            .uni-date__x-input {
                @apply p-0;
            }
            .uni-date-x {
                @apply p-0;
            }
        }
    }
</style>
